<!-- /*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/ -->
<template>
  <div>
    <DialogTemplate
      ref="DialogTemplateRef"
      v-bind="dialogData"
      @closeHanler="closeHanler"
    >
      <div slot="outerMain" style="padding: 0px 20px">
        <el-form :model="fromData" ref="formRef" :rules="rulesRul">
          <el-form-item label="体检主题" prop="themeName">
            <el-input
              placeholder="请输入"
              v-model="fromData.themeName"
            ></el-input>
          </el-form-item>
          <el-row :gutter="30">
            <el-col :span="12">
              <el-form-item label="体检开始时间">
                <el-date-picker
                  v-model="fromData.statreTime"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="体检截至时间">
                <el-date-picker
                  v-model="fromData.specifiedTime"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="备注" prop="notes">
            <el-input
              type="textarea"
              resize="none"
              :rows="2"
              placeholder="请输入"
              v-model="fromData.notes"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="outerFooter">
        <el-button @click="($event) => buttonClickHandler(0)">取消</el-button>
        <el-button type="primary" @click="($event) => buttonClickHandler(1)"
          >发布</el-button
        >
      </div>
    </DialogTemplate>
  </div>
</template>

<script>
import DialogTemplate from "@/components/DialogTemplate.vue";
export default {
  components: {
    DialogTemplate,
  },
  name: "taskInFoDialog",
  data() {
    return {
      dialogData: {
        title: "体检任务发布",
        outWidth: "50%",
        destroyOnClose: true,
        top: "140px",
      },

      fromData: {
        themeName: "",
        statreTime: "",
        specifiedTime: "",
        notes: "",
      },
      rulesRul: {
        themeName: [
          { required: true, message: "体检主题不能为空", trigger: "blur" },
        ],
        notes: [
          { required: true, message: "体检主题不能为空", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    //开启弹框
    handleOpen() {
      //1.打开弹框，并为弹框赋值标题
      this.$refs.DialogTemplateRef?.openDialogOne();
    },
    //弹出框关闭的回调
    closeHanler() {
      this.$refs.formRef.resetFields();
    },
    //保存/取消按钮点击事件
    buttonClickHandler(type) {
      if (type) {
        if (this.fromData.statreTime == "" ||this.fromData.specifiedTime == "") {
          this.$notify.warning({
            title: "错误",
            message: "完善开始及截至时间",
          });
          return;
        }
        this.$refs.formRef.validate((vaild) => {
          if (vaild) {
            console.log("准备保存", this.fromData);
          }
        });
      } else {
        //取消操作
        this.$refs.DialogTemplateRef?.closeDialogOne();
      }
    },
  },
};
</script>

<style scoped lang="less"></style>
